<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 角色管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form ref="form" :model="form" label-width="110px" label-position="left" >
                <el-row :gutter="20">
                    <el-col :span="12"><div class="grid-content bg-purple">
                        <el-form-item label="角色名称">
                            <el-input class="handle-input" clearable v-model="form.rolename"></el-input>
                        </el-form-item>

                    </div></el-col>
                    <el-col :span="12"><div class="grid-content bg-purple-light">

                        <el-button type="primary" icon="delete" style="margin-left: 30%" class="mr10" @click="search">查询</el-button>
                        <el-button type="primary" icon="delete" class="mr10" @click="all">显示全部</el-button>
                        <el-button type="primary" icon="search" class="mr10"  @click="handleAdd()" >新增</el-button>

                    </div>
                    </el-col>
                </el-row>

                <!-- 新增弹出框 -->
                <el-dialog title="新增" :visible.sync="addVisible" width="37%"  >
                    <el-form ref="form2" :model="form2"   label-width="125px" label-position="left" padding-left="5%">
                        <el-form-item label="角色名"  prop="rolename" :rules="[
                {required:true,message:'角色名不能为空'}
                ]">
                            <el-input class="handle-input" clearable v-model="form2.rolename"></el-input>
                        </el-form-item>

                        <el-form-item label="选择权限">
                            <el-tree
                                    :data="addtree"
                                    show-checkbox
                                    ref="tree"
                                    node-key="id"
                                    @check-change="handleNodeClick"
                                    :props="defaultProps">
                            </el-tree>

                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" v-loading="addLoading" @click="addRole(form2)">确 定</el-button>
            </span>
                </el-dialog>

                <!-- 重设权限弹出框 -->
                <el-dialog title="重设权限" :visible.sync="resetPrivVisible" width="37%"  >
                    <el-form ref="form4" :model="form4"   label-width="125px" label-position="left" padding-left="5%">

                        <el-form-item label="选择权限">
                            <el-tree
                                    :data="addtree"
                                    show-checkbox
                                    ref="tree"
                                    node-key="id"
                                    @check-change="handleNodeClick"
                                    :default-expand-all="true"
                                    :props="defaultProps">
                            </el-tree>

                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                <el-button @click="resetPrivVisible = false">取 消</el-button>
                <el-button type="primary"  v-loading="resetLoading" @click="resetPrivl(form4)">确 定</el-button>
            </span>
                </el-dialog>

            </el-form>
            <el-table :data="tableData" border  v-loading="listLoading" class="table"  stripe>
                <el-table-column prop="rolename" align="center"label="角色名" >
                </el-table-column>
                <el-table-column label="操作"  align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-search" @click="privilege(scope.$index, scope.row)">查看权限</el-button>
                        <el-button type="text" icon="el-icon-edit" @click="resetprivilege(scope.$index, scope.row)">重设权限</el-button>
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑用户名</el-button>
                        <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-col :span="24" class="toolbar pageBar">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pageSize"
                        layout=" prev, pager, next, sizes, total"
                        :total="total">
                </el-pagination>
            </el-col>

        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑角色名" :visible.sync="editVisible" width="37%"  >
            <el-form ref="form3" :model="form3"   label-width="125px" label-position="left" padding-left="5%">
                <el-form-item label="角色名"  prop="rolename" :rules="[
                {required:true,message:'角色名不能为空'}
                ]">
                    <el-input class="handle-input" clearable v-model="form3.rolename"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary"  v-loading="editLoading" @click="saveEdit('form3')">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 查看权限 -->
        <el-dialog title="查看权限" :visible.sync="treeVisible" width="37%"  :before-close="handleDialogClose">
            <el-form ref="form3" :model="form3"   label-width="125px" label-position="left" padding-left="5%">

                    <el-tree :data="looktree" :props="defaultProps" :default-expand-all="true" ></el-tree>



            </el-form>
        </el-dialog>


        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>



<script>

    export default {
        name: 'User',
        data() {
            return {
                url: this.GLOBAL.url,
                // url:"/api",
                file: '',
                tableData: [],
                addData1:[],
                addData2:[],
                currentPage: 1,
                total: 0,
                page: 1,
                pageSize: 10,
                pageNum:1,
                totalnum:0,
                totalpage:1,

                privid:[],
                looktree:[],

                addtree: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },



                usernameselectList:[],
                fullnameselectList:[],
                roleselectList:[],

                select_cate: '',
                select_word: '',
                del_list: [],
                is_search: false,
                editVisible: false,
                delVisible: false,
                delVisible1: false,
                addVisible:false,
                listLoading: false,
                resetPrivVisible:false,

                delete_diabled: false,

                addLoading:false,
                resetLoading:false,
                editLoading:false,


                treeVisible : false,
                looktree:[],
                form2:{
                    rolename:'',

                    privilegeidList:[]
                },
                form4:{
                    roleid:'',
                    privilegeidList:[]
                },

                form: {
                    username: '',
                    fullname: '',
                    userstat: ''
                },

                form3: {
                    roleid:'',
                    rolename:'',
                    privilegeidList:[]
                },

                form5:{
                    taximeters:''
                },
                idx: -1
            }



        },
        created() {
            this.getData();
            this.gettreedata();
        },
        methods: {
            //改变时
            handleSizeChange(val) {
                this.pageSize = val;
                console.log(this.pageSize);
                this.getData();
            },
            //条目改变时
            handleCurrentChange(val) {
                this.pageNum = val;
                console.log(this.pageNum);
                this.getData();
            },

            //获取列表数据
            getData() {
                this.listLoading = true;
                this.$axios({
                    method: 'post',
                    url: this.url+"/role/all?pageNum="+this.pageNum+"&pageSize="+this.pageSize,
                    data:this.form
                }).then((res) => {
                    console.log(res);
                    this.tableData = res.data.list;
                    this.total = res.data.totalnum;
                    this.page = res.data.totalpage;
                    this.listLoading = false;
                });
            },
            search() {
                this.is_search = true;
                this.getData();
            },


            all(){
                this.is_search = false;
                this.form.username = "";
                this.form.fullname = "";
                this.form.userstat="";
                this.getData();
            },

            handleDialogClose(){
                this.looktree = [];
                this.treeVisible = false;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            privilege(index, row) {
                this.idx = index;
                const item = this.tableData[index];
                this.form3 = {
                    roleid:item.roleid,
                };
                this.treeVisible = true;
                this.gettreedata_look()

            },
            resetprivilege(index, row){
                const item = this.tableData[index];
                this.form4 = {
                    roleid:item.roleid,
                }
                this.resetPrivVisible = true;
            },
            handleEdit(index, row) {
                this.idx = index;
                const item = this.tableData[index];
                this.form3 = {
                    roleid:item.roleid,
                    rolename:item.rolename
                };
                this.editVisible = true;

            },
            handleNodeClick(){
                this.form2.privilegeidList=this.$refs.tree.getCheckedKeys();
                this.form4.privilegeidList=this.$refs.tree.getCheckedKeys();
                console.log(this.form4);
            },


            gettreedata(){
                this.$axios({
                    method: 'post',
                    url: this.url+"/privilege/list",
                }).then((res) => {
                    // this.fullnameselectList = res.data;
                     let resdata = res.data;

                    console.log(resdata);
                    for(let i=0;i<resdata.length;i++){
                        if(resdata[i].privilegeparent == 0 ){
                            let obj = {
                                label: resdata[i].privilegename,
                                id: resdata[i].privilegeid,
                                children: []
                            };
                            this.addtree.push(obj);
                        }
                    }
                    console.log(this.addtree);

                    for(let i=0;i< this.addtree.length;i++) {
                        for (let j = 0; j < resdata.length; j++) {

                            if ( resdata[j].privilegeparent == this.addtree[i].id) {

                                let obj = {
                                    label: resdata[j].privilegename,
                                    id: resdata[j].privilegeid,
                                    children: []
                                };
                                this.addtree[i].children.push(obj);
                            }
                        }
                    }
                    console.log(this.addtree);

                });
            },



            gettreedata_look(){
                this.$axios({
                    method: 'post',
                    url: this.url+"/user/userprivall",
                    data:this.form3
                }).then((res) => {
                    let resdata = res.data;

                    console.log(resdata);
                    for(let i=0;i<resdata.length;i++){
                        if(resdata[i].privilegeparent == 0 ){
                            let obj = {
                                label: resdata[i].privilegename,
                                id: resdata[i].privilegeid,
                                children: []
                            };
                            this.looktree.push(obj);

                        }
                    }
                    console.log(this.expendVal);
                    console.log(this.looktree);

                    for(let i=0;i< this.looktree.length;i++) {
                        for (let j = 0; j < resdata.length; j++) {

                            if ( resdata[j].privilegeparent == this.looktree[i].id) {

                                let obj = {
                                    label: resdata[j].privilegename,
                                    id: resdata[j].privilegeid,
                                    children: []
                                };
                                this.looktree[i].children.push(obj);
                            }
                        }
                    }
                    // console.log(this.looktree);

                });
            },

            handleAdd() {
                this.addVisible = true;

            },

            handleDelete(index, row) {
                this.idx = index;
                this.delVisible = true;
                const item1 = this.tableData[index];
                this.form3.roleid = item1.roleid;
            },
            handleDelete_add() {
                this.delVisible1 = true;
            },
            resetPrivl(){
                this.$refs.form4.validate((valid) => {
                    if (valid) {
                        this.resetLoading = true;
                        console.log(this.form4);
                        this.$axios({
                            method: 'post',
                            url: this.url+"/role/reset",
                            data:this.form4
                        }).then((res) => {
                            if(res.data.message=="成功"){
                                this.$message.success(`重置成功`);
                                this.resetLoading = false;
                                this.resetPrivVisible = false;
                                this.getData();
                                this.form4.privilegeidList=[];
                                this.$refs.tree.setCheckedKeys([]) ;
                            }else {
                                this.$message.error(res.data.message);
                            }
                        }).catch(function (error) {
                            console.log(error);
                        });

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });


            },

            addRole(form2) {


                this.$refs.form2.validate((valid) => {
                    if (valid) {
                        this.addLoading = true;
                        // console.log(this.form2);
                        this.$axios({
                            method: 'post',
                            url: this.url+"/role/add",
                            data:this.form2
                        }).then((res) => {
                            if(res.data.message=="成功"){
                                this.$message.success(`添加成功`);
                                this.addVisible = false;
                                this.addLoading = false;
                                this.getData();
                                this.form2.rolename='';
                                this.form2.privilegeidList=[];
                                this.$refs.tree.setCheckedKeys([]) ;
                            }else {
                                this.$message.error(res.data.message);
                                this.addLoading = false;

                            }
                        }).catch(function (error) {
                            console.log(error);
                        });

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            // 保存编辑
            saveEdit(form3) {

                this.$refs.form3.validate((valid) => {
                    if (valid) {
                        this.editLoading = true;
                        this.$axios({
                            method: 'post',
                            url: this.url+"/role/update",
                            data:this.form3
                        }).then((res) => {
                            console.log(res);
                            if(res.data.message=="成功"){
                                this.$message.success(`修改第 ${this.idx+1} 行成功`);
                                this.editLoading = false;
                                this.editVisible = false;
                                this.getData();
                            }else {
                                this.$message.error(res.data.message);
                                this.editLoading = false;

                            }
                        }).catch(function (error) {
                            console.log(error);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            },

            // 确定删除
            deleteRow(){
                this.$axios({
                    method: 'post',
                    url: this.url+"/role/delete/"+this.form3.roleid,
                }).then((res) => {
                    console.log(res);
                    if(res.data.message=="成功"){
                        this.$message.success('删除成功');
                        this.delVisible = false;
                        this.getData();
                    }else {
                        this.$message.error(res.data.message);
                    }
                }).catch(function (error) {
                    console.log(error);
                });

            },



        }
        //     // 获取uuid


    }


</script>

<style>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 300px;
    }
    .handle-add-select {
        width: 200px;
    }
    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .handle-add-input {
        width: 200px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        margin-top: 10px;
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .mr10{
        margin-right: 10px;
        width: 80px;
    }
    .customWidth{
        width:80%;
    }

</style>
